<template>
    <!--  匹配记录  -->
    <el-row style="margin-bottom: 10px">
        <el-col :span="12">
            <div style="display: flex; align-items: center">
                <el-date-picker
                    style="height: 40px"
                    v-model="daterange"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :shortcuts="shortcuts"
                />
                <el-button type="primary" style="margin-left: 10px; height: 40px" @click="getList"
                    >搜索
                </el-button>
            </div>
        </el-col>
    </el-row>

    <!---------------------- 表格 ---------------------->
    <el-table :data="tableData" style="width: 100%" :empty-text="'暂无数据'" stripe>
        <el-table-column prop="created" label="匹配时间" width="160">
            <template #default="scope">
                {{ formatDate(scope.row.created) }}
            </template>
        </el-table-column>
        <el-table-column prop="project.acceptanceDepartment" label="注册地" width="200" />
        <el-table-column prop="project.projectKey" label="匹配政策" />
        <el-table-column prop="project.ratingFive" label="5星" width="60" />
        <el-table-column prop="" label="操作" width="100" />
    </el-table>

    <!---------------------- 分页 ---------------------->
    <div class="pagination" style="">
        <el-pagination
            v-model:current-page="currentPage1"
            :page-size="100"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next"
            :total="0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
import { customerProjectAdd, customerProjectLists } from '@/api/customer/customerProject'
import { useRoute } from 'vue-router'
import moment from 'moment'

const route = useRoute()

const formatDate = (date: any) => {
    return moment(date).format('YYYY-MM-DD HH:mm')
}
const tableData = ref([])

const getList = async () => {
    console.log(value2)
    const data = await customerProjectLists({ customerId: route.query.id })
    if (data.lists.length > 0) {
        tableData.value = data.lists
    } else tableData.value = []
}
onMounted(() => {
    getList()
})

const value2 = ref('')
const shortcuts = [
    {
        text: '今天',
        value: () => {
            const now = new Date()
            return [now, now]
        }
    },
    {
        text: '明天',
        value: () => {
            const start = new Date()
            const end = new Date()
            end.setDate(end.getDate() + 1)
            return [start, end]
        }
    },
    {
        text: '昨天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 1)
            return [start, end]
        }
    },
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        }
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        }
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        }
    }
]

const currentPage1 = ref(5)

const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
